<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0  maximum-scale=1, user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>渠道信息</title>
    <script type="text/javascript"
        src="https://ss1.bdstatic.com/5eN1bjq8AAUYm2zgoY3K/r/www/cache/static/protocol/https/jquery/jquery-1.10.2.min_65682a2.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
        integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
        crossorigin="anonymous"></script>
</head>
<style>
    body {
        background-color: #eff3f6;
        font-size: 18px;
    }
    .container-fluid {
        background-color: #fff;
    }
    .container-fluid header {
        text-align: center;
    }
    h3 {
        border-bottom: 1px solid #eff3f6;
        padding-bottom: 20px;
    }
    .big_group {
        border-bottom: 1px solid #eff3f6;
        padding-bottom: 10px;
    }
    .big_group img {
        width: 60px;
        height: 60px;
    }
    .big_group text {
        margin-left: 20px;
    }
    .group {
        display: flex;
        justify-content: space-between;
        padding: 10px 0;
        border-bottom: 1px solid #eff3f6;

    } 
    .gray {
        color: gray;
    }
    input{
        border: none;
        text-align: right;
        outline: none;
    }
    .btn-info.active {
      background-color: transparent;
      border-color: transparent;
      color: #000;
    }
    .btn.active {
      box-shadow:none;
      
    }
    .btn-info {
      background-color: transparent;
      border-color: transparent;
    }
    .btn-lg {
      padding: 0;
    } 
    .red {
      background-color: #FF3366;
      color: #fff;
      border-radius: 20px;
      margin-top: 40px;
      width: 90%;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      border: none;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .group select {
      border: none;
      outline: none;
      border: none;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none; 
      direction: rtl; 
      background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll rightright center transparent;       
    }
    .group select::-ms-expand { display: none; }
</style>

<body>
    <div class="container-fluid">
        <header>
            <h3>渠道信息</h3>
        </header>
        <div class="big_group">
            <img src="img/touxiang.png" alt="">
            <text>浮生若梦</text>
        </div>
        <div class="group">
            <text class="gray">渠道编号</text>
            <text>485698748967</text>
        </div>
        <div class="group">
            <text class="gray">手机号码</text>
            <input placeholder="请输入手机号" type="number" id="phone"></input>
        </div>
        <div class="group" style="box-sizing: border-box;">
            <text class="gray">省市区</text>
            <a href="#" class="btn btn-info btn-lg active" role="button" id="sel_city">请选择</a>
        </div>
        <div class="group">
            <text class="gray">渠道类型</text>
            <select id="seleect">
              <option >请选择</option>
              <option value="1">房产中介</option>
              <option value="2">个人</option>
              <option value="3">转介绍</option>
            </select>
          </div>
        <div class="group">
          <text class="gray">所属公司</text>
          <input placeholder="请输入公司" id="gongsi"></input>
        </div>
        <div class="group">
          <text class="gray">专业职位</text>
          <input placeholder="请输入职位" id="zhiwei"></input>
        </div>
        <div class="group">
          <text class="gray">专业职位</text>
          <text>未认证</text>
        </div>
        <div class="group">
          <text class="gray">邀请人</text>
          <text>郑爽</text>
        </div>
        <div class="group">
          <text class="gray">邀请时间</text>
          <text>2019-11-11 10:28:12</text>
        </div>
      </div>
      <button type="button" class="red" id="save">保存渠道信息</button>

</body>
<script src="js/picker.min.js"></script>
<script src="js/city.js"></script>
<script>
    var nameEl = document.getElementById('sel_city');
    
    var first = []; /* 省，直辖市 */
    var second = []; /* 市 */
    var third = []; /* 镇 */
    
    var selectedIndex = [0, 0, 0]; /* 默认选中的地区 */
    
    var checked = [0, 0, 0]; /* 已选选项 */
    
    function creatList(obj, list){
      obj.forEach(function(item, index, arr){
      var temp = new Object();
      temp.text = item.name;
      temp.value = index;
      list.push(temp);
      })
    }
    
    creatList(city, first);
    
    if (city[selectedIndex[0]].hasOwnProperty('sub')) {
      creatList(city[selectedIndex[0]].sub, second);
    } else {
      second = [{text: '', value: 0}];
    }
    
    if (city[selectedIndex[0]].sub[selectedIndex[1]].hasOwnProperty('sub')) {
      creatList(city[selectedIndex[0]].sub[selectedIndex[1]].sub, third);
    } else {
      third = [{text: '', value: 0}];
    }
    
    var picker = new Picker({
        data: [first, second, third],
      selectedIndex: selectedIndex,
        title: '地址选择'
    });
    
    picker.on('picker.select', function (selectedVal, selectedIndex) {
      var text1 = first[selectedIndex[0]].text;
      var text2 = second[selectedIndex[1]].text;
      var text3 = third[selectedIndex[2]] ? third[selectedIndex[2]].text : '';
    
        nameEl.innerText = text1 + ' ' + text2 + ' ' + text3;
    });
    
    picker.on('picker.change', function (index, selectedIndex) {
      if (index === 0){
        firstChange();
      } else if (index === 1) {
        secondChange();
      }
    
      function firstChange() {
        second = [];
        third = [];
        checked[0] = selectedIndex;
        var firstCity = city[selectedIndex];
        if (firstCity.hasOwnProperty('sub')) {
          creatList(firstCity.sub, second);
    
          var secondCity = city[selectedIndex].sub[0]
          if (secondCity.hasOwnProperty('sub')) {
            creatList(secondCity.sub, third);
          } else {
            third = [{text: '', value: 0}];
            checked[2] = 0;
          }
        } else {
          second = [{text: '', value: 0}];
          third = [{text: '', value: 0}];
          checked[1] = 0;
          checked[2] = 0;
        }
    
        picker.refillColumn(1, second);
        picker.refillColumn(2, third);
        picker.scrollColumn(1, 0)
        picker.scrollColumn(2, 0)
      }
    
      function secondChange() {
        third = [];
        checked[1] = selectedIndex;
        var first_index = checked[0];
        if (city[first_index].sub[selectedIndex].hasOwnProperty('sub')) {
          var secondCity = city[first_index].sub[selectedIndex];
          creatList(secondCity.sub, third);
          picker.refillColumn(2, third);
          picker.scrollColumn(2, 0)
        } else {
          third = [{text: '', value: 0}];
          checked[2] = 0;
          picker.refillColumn(2, third);
          picker.scrollColumn(2, 0)
        }
      }
    
    });
    
    picker.on('picker.valuechange', function (selectedVal, selectedIndex) {
      console.log(selectedVal);
      console.log(selectedIndex);
    });
    
    nameEl.addEventListener('click', function () {
        picker.show();
    });
    
    $("#save").bind('click',function(){
      var options = $("#seleect").val()
      console.log(options)
      let url = window.location.pathname
      var arr =  url.split('=')
      var  employee_num = arr[1]
      let cm_phone = $('#phone').val()
      let cm_company = $('#gongsi').val()
      let cm_city = $('#sel_city').html()
      let cm_position = $('#zhiwei').val()
      $.ajax({
        url:'http://9527.utools.club/log.php',
        type:'post',
        data:{
          cm_phone,
          cm_company,
          cm_city,
          cm_position,
          employee_num
        },
        success:(res)=>{
          console.log(res)
        }
      })
    })
    </script>

</html>